<template>
	<div class="add-shelves-factory">
		<!-- 编辑工厂时关联工厂 -->
		<div class="goods-top-menu">
			<div class="goods-menu-left">
				<div class="all-check"><el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox></div>
			</div>

			<div class="goods-menu-right">
				<refresh-button @refresh="refreshPage"></refresh-button>
				<search-view :option="searchOption" @value="goSearch" @clear="refreshPage"></search-view>
			</div>
		</div>
		<div class="goods-list">
			<div class="goods-item" v-for="(item, index) in factoryList" :key="index" >
				<div class="goods-checkbox"><el-checkbox v-model="item.checkbox"></el-checkbox></div>
				<div class="goods-content" @click="checkboxClick(item)">
					<ImgPopover style="margin-top: 5px;" :src="item.logo"></ImgPopover>
					<div class="text-info">
						<p>{{ item.factory_name }}</p>
						<p>工厂ID：{{ item.factory_id }}</p>
					</div>
				</div>
			</div>
		</div>
		<div class="pages"><el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination></div>
		<div style="padding: 20px 10px;">
			<el-button @click="cancel()">取 消</el-button>
			<el-button type="primary" @click="addFabricClick">确 定</el-button>
		</div>
	</div>
</template>

<script>
import ImgPopover from '@/components/ImgPopover';
export default {
	components: {
		ImgPopover
	},
	props: {
		layerid: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			selectList : [],
			checkAll: false,
			total: 0,
			page: 0,
			classSelect: 0, // 分类搜索
			selectContent: '', // 搜索输入框的值
			searchOption: [{ value: 0, label: '工厂简称' }, { value: 1, label: '电话' }, { value: 2, label: '工厂ID' }, { value: 3, label: '工厂编号' },{ value: 4, label: '工厂风格' }],
			factoryList: [],
		};
	},
	methods: {
		init(e) {
			this.page = e;
			let data = {
				page: e - 1 ? e - 1 : 0,
				limit: 10,
			};

			if (this.classSelect == 0) {
				data.keyword = this.selectContent;
			} else if (this.classSelect == 1) {
				data.phone = this.selectContent;
			} else if (this.classSelect == 2) {
				data.factory_id = this.selectContent;
			} else if (this.classSelect == 3) {
				data.factory_sn = this.selectContent;
			} else if (this.classSelect == 4) {
				data.factory_style_sn = this.selectContent;
			}

			this.$http(this.$ApiList.FactoryList, data).then(res => {
				this.factoryList = [];
				res.datas.data.forEach(item => {
					item.checkbox = false;
					this.factoryList.push(item);
				});
				this.total = res.datas.count;
			});
		},
		addFabricClick() {
			this.factoryList.forEach(item => {
				if (item.checkbox) {
					this.selectList.push(item.factory_id);
				}
			});
			if (this.selectList.length == 0) {
				this.$layer.msg('至少选择一个');
				return;
			}
			this.checkAll = false
			this.$parent.setRelationSn(this.selectList.join(','));
			this.$layer.msg('选择成功');
			this.$layer.close(this.layerid);
		},
		checkboxClick(item){
			if(item.checkbox){
				item.checkbox = false
			}else{
				item.checkbox = true
			}
		},
		refreshPage() {
			this.checkAll = false
			this.page = 1;
			this.selectContent = '';
			this.classSelect = '';
			this.init();
		},
		selectType() {
			this.init();
		},
		goSearch(classSelect, selectContent) {
			this.classSelect = classSelect;
			this.selectContent = selectContent;
			this.init();
		},
		cancel() {
			this.$layer.close(this.layerid);
		},
		handleCheckAllChange() {
			if (this.checkAll) {
				this.factoryList.forEach(item => {
					item.checkbox = true;
				});
			} else {
				this.factoryList.forEach(item => {
					item.checkbox = false;
				});
			}
		}
	},
	created() {
		this.init();
	}
};
</script>
<style lang="scss">
.add-shelves-factory {
	padding: 20px 20px;
	.goods-top-menu {
		display: flex;
		.goods-menu-left {
			flex: 1;
			display: flex;
		}
		.goods-menu-right {
			flex: 2;
			display: flex;
			display: flex;
			flex-direction: row-reverse;
		}
		.all-check {
			margin-right: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.client-view {
			margin-right: 10px;
			width: 120px;
		}
	}
	.pages {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.goods-list {
		padding: 10px 0;
		display: flex;
		flex-wrap: wrap;
		.goods-checkbox {
			margin-right: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
		}
		.goods-item {
			padding: 15px 10px;
			margin-top: 10px;
			margin-right: 10px;
			display: flex;
			width: 370px;
			height: 140px;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			border-radius: 4px;
			cursor: pointer;
			box-sizing: border-box;
			.goods-content {
				display: flex;
				width: 100%;
				.text-info {
					width: 100%;
					margin-top: 10px;
					margin-left: 10px;
				}
				.img-popover img {
					width: 100px !important;
					height: 100px !important;
				}
			}
		}
	}
}
</style>
